import { useState, useDeferredValue } from "react";
import Result from "./components/result";

const Chapter18 = (props) => {
    const { title } = props;
    const [keyword, setKeyword] = useState("");
    // 直接将状态值包裹，生成一个延迟版的状态值
    const deferredKeyword = useDeferredValue(keyword);
    const inputChange = (e) => {
        setKeyword(e.target.value.trim());
    };
    return (
        <div className='wrapper wrapper8'>
            <div className='page-header'>
                <h3>{title}</h3>
            </div>
            <div className='page-content'>
                <div className='form-group'>
                    <input
                        type='text'
                        className='form-control'
                        placeholder='请输入搜索关键字'
                        onChange={inputChange}
                    />
                </div>
                <Result keyword={deferredKeyword} />
            </div>
        </div>
    );
};

export default Chapter18;
